<template>
	<view class="all">
		<view class="aooo">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">
						<image class="botton" src="../../static/imges/details1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">
						<image class="botton" src="../../static/imges/details1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">
						<image class="botton" src="../../static/imges/details1.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="bold" @click="login">
				<image class="banter" src="../../static/imges/zuo3.png" mode=""></image>
			</view>
		</view>

		<view class="buan">
			<text class="lian">书亦烧仙草加盟 免费培训 不收取费用</text>
			<view class="booor">
				<text class="bott">所属行业：</text><text>餐饮行业</text>
			</view>
			<view class="bor">
				<text class="bott">投资金额：</text><text>5-30 万</text>
			</view>
		</view>
		<view class="botteer"></view>
		<view class="box">
			<view class="box5">
				<view class="box1">
					项目信息
				</view>
				<view class="box4"></view>
			</view>
			<view class="booor">
				<text class="bott">品牌定位：</text><text>AJDHI</text>
			</view>
			<view class="bor">
				<text class="bott">面积要求：</text><text>5-30 平方</text>
			</view>
			<view class="bor">
				<text class="bott">选址要求：</text><text>暂无</text>
			</view>
			<view class="bor">
				<text class="bott">门店数量：</text><text>500</text>
			</view>
			<view class="bor">
				<text class="bott">招商区域：</text><text>全国</text>
			</view>
			<view class="bor">
				<text class="bott">产品展示：</text>
			</view>
			<view class="bor" style="width: 92%;height: 250rpx;">
				<text class="bott">南昌拌粉是江西的传统风味小吃，美食家称其为“无可挑剔的口味”，南昌拌粉是江西的传统风味小吃，美食家称其为“无可挑剔的口味”，南昌拌粉是江西的传统风味小吃，美食家称其为“无可挑剔的口味”，南昌拌粉是江西的传统风味小吃，美食家称其为“无可挑剔的口味”，</text>
			</view>
			<view class="butde">
				<image class="content" src="../../static/imges/nc.png" mode=""></image>
				<image class="contont" src="../../static/imges/nc2.png" mode=""></image>
			</view>
			<view style="height: 50rpx;"></view>
			<view style="width: 100%;height: 20rpx;background-color: #F4F4F4;"></view>
			<view class="headsearch">
				<view class="box5">
					<view class="box1">
						加盟流程
					</view>
					<view class="box4"></view>
				</view>
				<view class="booor">
					<text>一：来电咨询；</text>
				</view>
				<view class="bor">
					<text>二：合作商进行实地考查；</text>
				</view>
				<view class="bor">
					<text>三：双方正式签订合同；</text>
				</view>
				<view class="bor">
					<text>四：店铺选址和市场评估；</text>
				</view>
				<view class="bor">
					<text>五：双方商讨店面的设计和规划；</text>
				</view>
				<view class="bor">
					<text>六：总部安排合作商进行专业的技术培训；</text>
				</view>
				<view class="bor">
					<text>七：合作商按照总部提供的统一设计方案进行修改；</text>
				</view>

				<view class="mct__item">
					加盟热线 ：2558-9088843
				</view>
				<view style="height: 70rpx;">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			login(){
				uni.navigateTo({
				    url: './JoinList'
				});
			}
		}
	}
</script>

<style>
	.swiper {
		width: 100%;
		height: 480rpx;
	}
	.banter {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 8rpx;
		left: 4rpx;
	}
	.botton{
		width: 100%;
	}

	.bold {
		width: 55rpx;
		height: 55rpx;
		border-radius: 50%;
		background-color: #A1A1A1;
		opacity: 0.4;
		position: absolute;
		top:80rpx;
		left: 20rpx;
	}

	.buan {
		width: 100%;
		height: 200rpx;
		position: relative;
		top: -20rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.lian {
		position: relative;
		margin-left: 30rpx;
		top: 25rpx;
		font-weight: 550;
	}

	.booor,
	.bor {
		margin-left: 30rpx;
		margin-top: 60rpx;
		font-size: 20rpx;
	}

	.bor {
		margin-top: 30rpx;
	}

	.bott {
		color: #ccc;
	}

	.botteer {
		width: 100%;
		height: 20rpx;
		background-color: #F4F4F4;
	}

	.box1 {
		color: #164DA1;
		font-weight: 600;
		text-align: center;
	}

	.box4 {
		margin: auto;
		width: 50rpx;
		height: 7rpx;
		margin-top: 7rpx;
		background-image: linear-gradient(to right, rgba(24, 84, 164, 0.7) 55%, rgba(247, 147, 29, 1) 45%);
	}

	.box5 {
		position: relative;
		width: 140rpx;
		top: 30rpx;
		left: 30rpx;
	}

	.butde {
		width: 90%;
		margin-left: 5%;
		height: 700rpx;
	}

	.content,
	.contont {
		width: 100%;
		height: 50%;
	}

	.content {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.contont {
		margin-top: -10rpx;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}

	.mct__item {
		width: 70%;
		height: 80rpx;
		background-color: #1150A4;
		margin-left: 15%;
		border-radius: 20rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
		margin-top: 60rpx;
	}
</style>
